<template>
  <div class="common-container">
    <div class="right">
      <div class="right-define">
        <div class="mountPoints_info" style="position: relative">
          <div class="mountPoints_info_title">
            <span class="title">设备信息</span>
            <!-- <el-button size="medium" style="margin-left: 15px;" @click="edit">修改</el-button> -->
          </div>
          <div class="define">
                <el-image 
                style="width: 50px; height: 50px"
                :src="pic" 
                :preview-src-list="srcList">
              </el-image>
                <div style="flex:1;display: flex;flex-direction: column;justify-content: space-around;margin-left: 15px;height: 100%;">
                  <el-row :gutter="20">
              <el-col :span="5">设备编码：{{ spacesManage.warn.imei }}</el-col>
              <el-col :span="5">产品类型：
                <span>{{ spacesManage.warn.deviceType|deviceTypeText }}</span>
              </el-col>
              <el-col :span="5">产品型号：{{ spacesManage.warn.classMark }}</el-col>
              <el-col :span="5">安装点：{{ spacesManage.warn.name }}</el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="5">组织机构：{{ spacesManage.warn.orgName }}</el-col>
              <el-col :span="5">告警类型： 
                <dict-tag :options="dict.type.device_alarm_type" :value="spacesManage.warn.alarmType" :showTitle="true"/>
              </el-col>
              <el-col :span="5">告警发生时间：{{ spacesManage.warn.createTime }}</el-col>
              <!-- <el-col :span="4">建筑物：A座</el-col>
              <el-col :span="4">建筑物：A座</el-col> -->
            </el-row>
                </div>
          </div>
        </div>
      </div>

      <!-- 设备 -->
      <div class="right-header">
        <div class="right-header_left">
          <span class="title">处理记录</span>
          <!-- <el-input v-model="search_val" placeholder="请输入用户名" size="medium" style="width: 300px;"></el-input>
          <el-button size="medium" style="margin-left: 15px;">查询</el-button> -->
        </div>
        <div class="right-header_right">
          <el-button size="medium" style="margin-left: 15px" @click="onAdd"
            v-if="spacesManage.warn.status == '1'">处理
          </el-button>
          <!-- <el-button size="medium" style="margin-left: 15px" @click="onEdit"
            v-if="spacesManage.warn.status == '2' ">完结
          </el-button> -->
          <el-button size="medium" style="margin-left: 15px" @click="onPlayback" v-if="alarmPlayFlag">告警回放
          </el-button>
        </div>
      </div>
      <div class="right-bottom">
        <el-table :data="tableData" height="calc(100% - 65px)" class="table" @selection-change="batchSelect"
          :header-cell-style="headerStyle">
          <!-- <el-table-column align="center" type="selection" :reserve-selection="true" min-width="40">
          </el-table-column> -->
          <el-table-column align="center" label="序号" type="index" width="80">
          </el-table-column>
          <el-table-column align="center" prop="username" label="处理人" min-width="200">
          </el-table-column>

          <el-table-column align="center" prop="alarmFactor" label="告警类型" min-width="160" show-overflow-tooltip>
          </el-table-column>
          <el-table-column align="center" prop="feedback" label="反馈内容" min-width="220" show-overflow-tooltip>
            <template slot-scope="{ row }">
              <span v-if="row.feedback != 'null'">{{ row.feedback }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="" label="照片" min-width="160">
            <template slot-scope="{ row }">

              <!-- <div style="height: 50px"> -->
              <!-- <el-image v-if="row.pic != 'null' && row.pic != ''" style="width: 50px; height: 50px" :src="row.pic"
                  fit="fill"></el-image>
                <el-image v-else style="width: 50px; height: 50px" fit="fill"
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"></el-image> -->
              <!-- </div> -->

              <div style="display: flex;align-items: center;justify-content: center;width: 100%;">
              <el-popover placement="top-start" title="" trigger="hover" v-if="row.pic != 'null' && row.pic != ''">
                <img :src="row.pic" alt="" style="width: 250px;">
                <img slot="reference" :src="row.pic" style="width: 15%;">
              </el-popover>

              <el-image v-else style="width: 15%;display: flex;align-items: center;" fit="fill"
                src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"></el-image>
                </div>

            </template>
          </el-table-column>

          <el-table-column align="center" prop="handlingTime" label="处理时间" min-width="160" show-overflow-tooltip>
          </el-table-column>
         
        </el-table>
        <!-- <pagination :page.sync="page" :limit.sync="limit" :total="total" @pagination="getByTargetId" class="pagination">
        </pagination> -->
      </div>
    </div>
    <!-- <addModel ref="refAdd" :getLocationInfo="getLocationInfo"></addModel>
    <editModel ref="refEdit" :getLocationInfo="getLocationInfo" @getedit='getedit'></editModel>
    <batchModel ref="refBatch"></batchModel>
    <alarmReceiver ref="refAlarmReceiver"></alarmReceiver> -->

    <warnHandle ref="refWarnHandle" :alarmHandleInfo="alarmHandleInfo" @changstatus="changstatus"></warnHandle>
    <playback ref="refplayback" :alarmPlayList="alarmPlayList"></playback>
  </div>
</template>

<script>
// import addModel from "./components/addModel.vue";
// import editModel from "./components/editModel.vue";
// import batchModel from "./components/batchModel.vue";
// import alarmReceiver from "./components/alarmReceiver.vue";
import tableStyleMixin from "@mixin/table-style";
// import Pagination from "@components/Pagination.vue";
import {
  reqDeviceUnBind,
  reqAlarmHandleResult,
  reqClosedLoop,
  reqGetProductByType,
  reqAlarmPlay
} from "@/api/api";
import { mapState } from "vuex";
import WarnHandle from "./components/warnHandle.vue";
import playback from "./components/playback.vue";

export default {
   dicts: ['device_alarm_type'],
  // name: "",
  components: {
    // Pagination,
    // addModel,
    // editModel,
    // batchModel,
    // alarmReceiver,
    WarnHandle,
    playback
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      alarmHandleInfo: {},
      AlarmHandle: [],
      search_val: "",
      page: 1,
      limit: 20,
      total: 100,
      tableData: [],
      getLocationInfo: {
        getLat: "",
        getLng: "",
        getAdd: "",
        province: "",
        city: "",
        area: "",
        provinceCityAreaValue: "",
      },
      batchDate: [],
      meinvArr: [
        require("@assets/images/meinv1.jpg"),
        require("@assets/images/meinv2.jpg"),
        require("@assets/images/meinv3.jpg"),
        require("@assets/images/meinv4.jpg"),
        require("@assets/images/meinv5.jpg"),
      ],
      arr: [
        {
          mobile: "",
        },
      ],
      pic:"",
      srcList:[],
      alarmPlayFlag:false,
      alarmPlayList:[],
    };
  },
  mounted() { },
  computed: {
    ...mapState(["spacesManage","user"]),
  },
  methods: {
    changstatus(status){
      this.spacesManage.warn.status=status
      this.$store.commit("saveWarn", this.spacesManage.warn);//更改vuex状态
    },
    // 修改后更新安装点信息
    getedit(e) {
      // console.log(e);
    },
    // 修改安装点信息
    edit() { },

    // 选择复选框批量添加联系人
    batchSelect(arr) {
      this.batchDate = [];
      arr.forEach((c) => {
        this.batchDate.push(c.id);
      });
      // console.log(this.batchDate, "this.batchDate");
    },
    // 更多操作回调事件
    // onDropdown(e) {
    //   switch (e) {
    //     case "batch":
    //       console.log("batch");
    //       this.$refs.refBatch.dialogVisible = true;
    //       break;
    //     case "set":
    //       console.log("set");
    //       break;
    //     case "remove":
    //       console.log("remove");
    //       break;
    //     case "alarmReceiver":
    //       console.log("alarmReceiver");
    //       this.$refs.refAlarmReceiver.dialogVisible = true;
    //       break;
    //     case "del":
    //       console.log("del");
    //   }
    // },
    // 新增
    onAdd() {
      if (this.tableData.length == "10") {
        return this.$modal.notifyWarning("告警最多可处理10次");
      }
      this.alarmHandleInfo = JSON.parse(JSON.stringify(this.spacesManage.warn));
      this.$refs.refWarnHandle.dialogVisible = true;
    },
    onEdit() {
      this.$confirm("是否确定完结？完结后不能再次处理！", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reqClosedLoop({
            id: this.spacesManage.warn.id
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("完结成功");
          this.spacesManage.warn.status=3
          this.$store.commit("saveWarn", this.spacesManage.warn);//更改vuex状态
        })
        .catch(() => { });
    },
    // 解绑设备
    onDel(id) {
      this.$confirm("是否确定要拆除此设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await reqDeviceUnBind({
            id,
            userId: this.user.userId,
          });
          if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
          this.$modal.notifySuccess("拆除成功");
          this.DeviceBySpaceId();
        })
        .catch(() => { });
    },
    // 告警处理记录
    async AlarmHandleResult() {
      var res = await reqAlarmHandleResult(this.spacesManage.warn.id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.tableData = res.data.row;
    },
    refWarn() {
      // && this.tableData.length != "10"
      if (
        this.$route.params.id == "111" &&
        this.spacesManage.warn.status == "1"
      ) {
        this.alarmHandleInfo = JSON.parse(
          JSON.stringify(this.spacesManage.warn)
        );
        setTimeout(() => {
          this.$refs.refWarnHandle.dialogVisible = true;
        }, 400);
      }
    },
    //一百四十一、产品类型获取产品
    async getProductByType(){
      var res = await reqGetProductByType(this.spacesManage.warn.deviceType);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res);
      this.pic=res.data.row.pic;
      this.srcList=[res.data.row.pic]
    },
    // 告警id查询告警视频列表回放
    async getAlarmPlay(){
      const res = await reqAlarmPlay(this.spacesManage.warn.id);
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      if(res.data.row.length==0){
        this.alarmPlayFlag=false;
        return;
      }
      this.alarmPlayFlag=true;
      // this.alarmPlayList=res.data.row;
      this.alarmPlayList = JSON.parse(JSON.stringify(res.data.row));
    },
    onPlayback(){
      this.$refs.refplayback.dialogPlayback=true;
    },
  },
  async created() {
    // console.log(this.spacesManage.warn);
    await this.AlarmHandleResult();
    await this.refWarn();
    this.getProductByType()
    this.getAlarmPlay()
  },
  async activated () {
    // console.log(this.spacesManage.warn.status);
    await this.AlarmHandleResult();
    await this.refWarn();
    this.getProductByType()
    this.getAlarmPlay()
  }
};
</script>

<style scoped lang="less">
.common-container {
  width: 100%;
  height: 100%;
  // display: flex;
  // align-items: center;
  // border: 1px solid @primaryBorderColor;
  border-radius: 6px;
  box-shadow: none;

  .left {
    width: 264px;
    height: 100%;
    background: @primaryHeaderBgcolor;
    border-radius: 6px 0 0 6px;
    border-right: 1px solid @primaryBorderColor;
  }

  .right {
    // width: calc(100% - 264px);
    width: 100%;
    left: 264px;
    height: 100%;
    border-radius: 6px;

    // background: @primaryHeaderBgcolor;
    .table {
      background: @primaryHeaderBgcolor;
    }

    .right-define {
      border-radius: 6px;
      // background: @primaryHeaderBgcolor;
      height: 20%;
      min-height: 169px;
      width: 100%;
      margin-bottom: 14px;
      color: @primaryThemeTxtColor;
      display: flex;
      justify-content: space-between;

      .title {
        font-size: 18px;
        font-weight: 600;
      }

      .mountPoints_info {
        position: relative;
        box-sizing: border-box;
        padding: 10px 20px;
        // flex: 2;
        border-radius: 6px;
        width: 100%;
        background: @primaryHeaderBgcolor;
        // box-shadow: 0 4px 24px 0 ~"rgb(34 41 47 / 10%)";
        box-shadow: @boxShadow;

        .mountPoints_info_title {
          padding: 10px 0;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .define {
          display: flex;
          // flex-direction: column;
          height: calc(100% - 53px);
          // justify-content: space-around;
          align-items: center;

          // margin-top: 10px;
          .header_common {
            display: flex;
            flex-direction: column;
            // justify-content: space-around;
            flex: 1;

            >span:last-of-type {
              margin-top: 6px;
            }
          }

          .son_title {
            font-size: 14px;
          }

          .define_footer {
            display: flex;
            justify-content: space-between;
            flex: 1;
          }
        }
      }

      .mountPoints_pics {
        background: @primaryHeaderBgcolor;
        // flex: 1;
        width: 36%;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 10px 20px;
        // box-shadow: 0 4px 24px 0 ~"rgb(34 41 47 / 10%)";
        box-shadow: @boxShadow;
      }
    }

    .right-header {
      box-sizing: border-box;
      padding: 0 12px;
      height: 65px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: @primaryHeaderBgcolor;
      border-radius: 6px 6px 0 0;
      // box-shadow: 0 4px 24px 0 ~"rgb(34 41 47 / 10%)";
      box-shadow: @boxShadow;

      .right-header_left {
        min-width: 500px;

        .title {
          font-size: 18px;
          font-weight: 600;
          // color: #fff;
          color: @primaryThemeTxtColor;
          margin-left: 10px;
        }
      }

      .right-header_right {
        width: 300px;
        display: flex;
        justify-content: flex-end;
        min-width: 300px;
      }
    }

    .right-bottom {
      // height: calc(100% - 65px);
      height: calc(100% - 251px);
      // box-shadow: 0 4px 24px 0 ~"rgb(34 41 47 / 10%)";
      // box-shadow: @boxShadow;
    }

    .table {
      width: 100%;
      // height: calc(100% - 26px) !important;
      height: 100% !important;
      min-height: calc(100% - 65px);
    }
  }
}

::v-deep .el-table tr {
  background-color: @primaryHeaderBgcolor;
  color: @primaryThemeTxtColor;
}

::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid @primaryBorderColor;
}

::v-deep .el-table--border::after,
.el-table--group::after,
.el-table::before {
  content: "";
  position: absolute;
  background-color: @primaryBorderColor;
  z-index: 1;
}

::v-deep .el-table tbody tr:hover>td {
  background: @primaryMenuItem !important;
}

::v-deep .el-button--medium {
  background: #7367f0;
  color: #fff;
  border: none;
}

.mapLoc {
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;

  .iframe {
    width: 100%;
    height: 100%;
  }
}

// 省市区
::v-deep .distpicker-address-wrapper select {
  // padding: 0.2rem 1.75rem;
  height: 35px;
  font-size: -1rem;
  font-size: 14px;
  line-height: 1.25;
  width: 360px;
  margin-bottom: 10px;
  background-color: @primaryHeaderBgcolor !important;
  border: 1px solid @primaryBorderColor;
  color: @primaryContentTxt !important;
}

// dialog 框
::v-deep .el-dialog {
  background: transparent;
}

::v-deep .el-dialog__header {
  background: @primaryBgcolor;
  border-radius: 6px 6px 0 0;
}

::v-deep .el-input__inner {
  background: @primaryHeaderBgcolor !important;
  border: 1px solid @primaryBorderColor;
  color: @primaryContentTxt !important;
}

::v-deep .el-dialog__footer {
  background: @primaryHeaderBgcolor !important;
  border-radius: 0 0 6px 6px;
}

::v-deep .el-dialog__title {
  color: @primaryThemeTxtColor2 !important;
}

::v-deep .el-dialog__close {
  color: @primaryContentTxt !important;
}

::v-deep .el-textarea__inner {
  background: @primaryHeaderBgcolor !important;
  color: @primaryContentTxt !important;
}

::v-deep .el-dialog__body {
  background: @primaryHeaderBgcolor !important;
}

::v-deep .el-form-item__label {
  color: @primaryThemeTxtColor2 !important;
}

::v-deep .el-textarea__inner {
  border: 1px solid @primaryBorderColor;
}

// 表格按钮
.tableBtnIcon {
  font-size: 18px;
  cursor: pointer;
}

::v-deep .el-table .cell.el-tooltip {
  // display: flex;
  // align-items: center;
  // justify-content: space-around;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

::v-deep .el-carousel__container {
  // height: 114px !important;
  height: 16vh !important;
}

::v-deep .el-carousel__item h3 {
  line-height: 114px;
}

// 分页器
.pagination {
  ::v-deep .el-pager {
    border-radius: 30px;
    background: @paginationBgcolor;
    margin: 0 5px;
    height: 32px;
  }

  ::v-deep .el-pager li {
    min-width: 32px !important;
    background: @paginationBgcolor;
    color: #b4b7bd;
    height: 32px;
    line-height: 32px;
  }

  ::v-deep .el-pager li.active {
    color: #fff;
    border-radius: 30px;
    background: #7367f0 !important;
  }

  ::v-deep .el-pager li:first-child {
    border-radius: 30px;
  }

  ::v-deep .el-pager li:last-child {
    border-radius: 30px;
  }
}

// 通知方式文字
::v-deep .el-switch__label--left {
  color: @primaryTxtcolor;
  margin-left: 20px;
}

// 列表照片居中
::v-deep .el-popover__reference-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
